<template>
	<div class="order-main">
		<div class="dept" :class="[dept.expand ? '_expand' : '_collapse']">
			<div class="label">
				<div>组织架构</div>
				<ul>
					<li>
						<el-tooltip content="刷新">
							<i class="el-icon-refresh" @click="deptRefresh()"></i>
						</el-tooltip>
					</li>
				</ul>
			</div>

			<div class="container">
				<el-tree
					:data="dept.list"
					:props="{
						label: 'name'
					}"
					:draggable="dept.isDrag"
					v-loading="dept.loading"
					node-key="id"
					highlight-current
					default-expand-all
					:expand-on-click-node="false"
					@node-click="deptClick"
				></el-tree>
			</div>
		</div>
		<div class="box">
			<groupDetail ref="group-detail" @backList="backList" v-if="detail"></groupDetail>
			<groupContent
				ref="group-content"
				v-show="!detail"
				@showdetail="showDetail"
			></groupContent>
		</div>
		<div
			v-if="!detail"
			class="icon-arrow"
			:class="[dept.expand ? '_expand' : '_collapse']"
			@click="deptExpand"
		>
			<i class="el-icon-arrow-left" v-if="dept.expand"></i>
			<i class="el-icon-arrow-right" v-else></i>
		</div>
	</div>
</template>

<script>
import groupContent from './content.vue';
import groupDetail from './detail.vue';
import { deepTree } from '@/cool/utils/index';
export default {
	data() {
		return {
			detail: false,
			dept: {
				isDrag: false,
				loading: false,
				expand: true,
				list: [],
				recursion: []
			},
			options: {
				role: [],
				department: [],
				departmentBelow: []
			},
			departmentId: '' //组织ID
		};
	},
	components: {
		groupContent,
		groupDetail
	},
	created() {
		// 获取组织分组列表
		this.deptRefresh();

		if (this.$route.query.teamId) {
			this.showDetail(this.$route.query);
		}
	},
	methods: {
		showDetail(params) {
			this.detail = true;
			this.dept.expand = false;
			this.$nextTick(() => {
				this.$refs['group-detail'].detailRefresh(params);
			});
		},
		backList() {
			this.dept.expand = true;
			this.detail = false;
		},
		deptRefresh() {
			this.dept.isDrag = false;
			this.dept.loading = true;
			this.$service.system.dept
				.list()
				.then(res => {
					this.dept.list = deepTree(res);
					this.options.department = res;
				})
				.done(() => {
					this.dept.loading = false;
				});
		},
		deptExpand() {
			this.dept.expand = !this.dept.expand;
		},
		deptClick(e) {
			this.departmentId = e.id;
			this.$refs['group-content'].refresh({ teamId: this.departmentId });
		}
	}
};
</script>

<style lang="stylus" scoped>
.order-main {
	width 100%
	height calc(100vh - 60px );
	display: flex;
	position: relative;
	.dept {
		height: 100%;
		width 300px
		background-color: #fff;
		overflow-y: auto;
		overflow-x: hidden;
		transition: 0.3s;
		margin-right 10px
		&._collapse {
			margin-right: 0;
			width: 0;
		}

		>>>.el-tree-node__content {
			height: 36px;
		}

		.label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40px;
			padding: 0 10px;
			background-color: #fff;
			letter-spacing: 1px;
			ul {
				display: flex;

				li {
					list-style: none;
					margin-left: 5px;
					cursor: pointer;
					padding: 5px;
					display: flex;
					justify-content: center;
					align-items: center;

					&:not(.no):hover {
						background-color: #eee;
					}
				}
			}
			div {
				display: flex;
				align-items: center;
				font-size: 15px;
				color: $color;
				flex: 1;
				min-width: 100px;

				span {
					font-size: 12px;
					position: relative;
					left: 5px;
					background-color: $color2;
					color: #fff;
					border-radius: 10px;
					padding: 0.5px 5px;
				}
			}

			i {
				font-size: 18px;
				color: $color;
				cursor: pointer;

				&:hover {
					color: $color2;
				}
			}
		}
	}
	.box {
		width: calc(100% - 310px);
		flex: 1;
	}
	.icon-arrow {
		position: absolute;
		top: calc(50% - 20px);
		display: inline-block;
		z-index: 9;
		cursor: pointer;
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;

		i {
			position: absolute;
			top: -8px;
			left: 0;
			color: #666;
		}

		&._expand {
			border-right: 15px solid #f7f7f7;
			left: 285px;
		}

		&._collapse {
			left: 0;
			border-left: 15px solid #f7f7f7;

			i {
				left: -15px;
			}
		}

		&:hover {
			opacity: 0.8;
		}
	}
}
</style>
